<template>
	<view class="">
		<view class="lineBody" v-for="(child, idx) in cardData" :key="idx" :id="myUid == child.uid && isme ? 'meCard' : ''">
			<u-swipe-action>
				<u-swipe-action-item :options="options" :disabled="cardDisabled" @click="cardDel(child, idx)">
					<view
						:class="myUid == child.uid && isme ? 'meCard' : ''"
						class="card_cont flex align-center justify-between"
						@click="goPages('/subPages/my/list/card/card_main?id=' + child.uid + '&exhibitionId=' + exhibitionId)"
					>
						<view class="flex">
							<u-avatar :src="child.userphoto" size="50" mode="aspectFill"></u-avatar>
							<view class="ml-2">
								<view class="flex flex-wrap align-center">
									<text class="font">{{ child.name || '未填写昵称' }}</text>
									<image
										v-if="child.attestation == 1"
										class="ml-1"
										src="@/static/img2/my/my_card/auth_icon.png"
										mode=""
										style="width: 30rpx;height: 30rpx;"
									></image>
									<text class="font-sm c_9 ml-2">{{ child.post || '未填写职位' }}</text>
									<text class="font-sm c_9 ml-2">{{ child.phone || '未填写手机号' }}</text>
								</view>
								<view class="font-sm mt-1">
									<text>{{ child.companyname || '未填写公司名称' }}</text>
								</view>
							</view>
						</view>
						<view class="r_btn">
							<!-- 0 申请中， 1 同意，2 去申请，3 我的名片-->
							<image
								v-if="child.card_status == 0"
								class="off_icon"
								src="@/static/img2/my/my_card/not_exchange.png"
								mode="aspectFit"
								@click.stop="exChange(child, idx, 'off')"
							></image>
							<view class="success flex justify-between" v-else-if="child.card_status == 1 || cardcase" @click.stop>
								<image src="@/static/img2/my/my_card/phone_call.png" mode="aspectFit" @click.stop="callChange(child.phone)"></image>
								<view class="chat_icon">
									<image
										src="@/static/img2/my/my_card/word.png"
										mode="aspectFit"
										@click="goPages('/subPages/my/list/card/chat?friend=' + JSON.stringify(child))"
									></image>
									<text v-if="child.chat_status == 1" class="badge bg-white c_main text-center">{{ child.chat_count }}</text>
								</view>
							</view>
							<image
								class="edit_icon"
								v-else-if="child.card_status == 3"
								src="@/static/img2/my/my_card/edit.png"
								mode="aspectFit"
								@click.stop="goPages('/subPages/my/list/card/business_card')"
							></image>
							<image v-else src="@/static/img2/my/my_card/exchange.png" mode="aspectFit" @click.stop="showChange(child, idx)"></image>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
	</view>
</template>

<script>
import { exchangeCardApply, businessDelCards } from '@/api/my/card.js';
export default {
	props: ['cardList', 'exhibitionId', 'cardDisabled', 'isme', 'content', 'cardcase'],
	data() {
		return {
			cardData: [],
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}
			],
			cardIndex: 0,
			cardItem: {},
			myUid: uni.getStorageSync('userInfo').userId
		};
	},
	watch: {
		cardList: {
			handler(newV, oldV) {
				this.cardData = newV;
			},
			deep: true,
			immediate: true
		},
		cardData: {
			handler(newV, oldV) {
				this.cardData = newV;
			},
			deep: true
		}
	},
	created() {
		this.cardData = this.cardList;
		this.myUid = uni.getStorageSync('userInfo').userId;
		// console.log('isme', this.isme);
	},
	methods: {
		showChange(val, idx) {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				this.toLogin(); //去登录
				return;
			}
			this.cardIndex = idx;
			this.cardItem = val;
			this.$emit('modelShow', true);
		},
		// 交换名片
		exChange(val, idx, state) {
			let msg = {
				uid: state ? val.uid : this.cardItem.uid,
				apply_card_id: state ? val.id : this.cardItem.id,
				zhanhui_id: this.exhibitionId,
				ask_status: !state ? 1 : 2,
				content: this.content
			};
			exchangeCardApply(msg)
				.then(res => {
					uni.$u.toast(res.msg);
					this.$emit('modelShow', false);
					if (res.code == 3) {
						// 去完善名片信息
						setTimeout(() => {
							let msg = {
								title: 'cardMain',
								cardUid: this.cardItem.uid,
								exhibitionId: this.exhibitionId
							};
							uni.setStorageSync('loginToPage', msg);
							uni.navigateTo({
								url: '/subPages/my/list/card/business_card'
							});
						}, 1500);
						return;
					}
					setTimeout(() => {
						let index = state ? idx : this.cardIndex;
						this.cardData[index].card_status = !state ? 0 : 2;
						this.cardData = JSON.parse(JSON.stringify(this.cardData));
					}, 200);
				})
				.catch(err => {
					console.log('交换名片操作失败', err);
				});
		},
		// 拨打电话
		callChange(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		// 删除名片
		cardDel(val, idx) {
			businessDelCards({ ids: [val.id] })
				.then(res => {
					if (res.code == 0) {
						this.cardData.splice(idx, 1);
						if (this.cardData.length <= 0) {
							this.$emit('cardDel');
						}
					}
					uni.$u.toast(res.msg);
				})
				.catch(err => {
					console.log('删除名片失败', err);
				});
		},
		//获取元素离页面顶部的距离
		getElementScollTop() {
			this.$nextTick(() => {
				// setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.meCard')
					.boundingClientRect(res => {
						// console.log('scrollTop', res, res.top);
						// this.scrollTop = res.top;
						this.$emit('scrollTop', res.top);
					})
					.exec();
				// }, 1000);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.lineBody {
	// padding: 20rpx 0 20rpx 30rpx;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(164, 164, 164, 0.2);
	.card_cont {
		padding: 20rpx 30rpx;
	}
	.meCard {
		// background-color: #a0cfff;
		border-left: 10rpx solid $color14;
	}
	.headImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 15rpx;
		margin-right: 30rpx;
	}
}
.lineBody:last-child {
	border: 0;
}
.r_btn {
	width: 40rpx;
	height: 40rpx;
	image {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0;
	}
	.off_icon {
		width: 32rpx;
		height: 32rpx;
	}
	.edit_icon {
		width: 40rpx;
		height: 36rpx;
	}
	.success {
		width: 90rpx;
		margin-left: -50rpx;
	}
	.chat_icon {
		position: relative;
		.badge {
			position: absolute;
			top: -12rpx;
			right: -12rpx;
			border: 1px solid $color14;
			font-size: 18rpx;
			border-radius: 50%;
			width: 30rpx;
			height: 30rpx;
			line-height: 30rpx;
		}
	}
}
</style>
